<template>
    <div class="resource-tab search-tab">
        <div class="tabs-content">
            <div class="search-content m-b-10">
                <!-- <pui-input placeholder="搜索组件" v-model="mainRef.queryString" type="search" iconPosition="right" @onIconClick="searchComponent"></pui-input> -->
                <pui-input placeholder="搜索组件" v-model="mainRef.queryString" type="search" iconPosition="right"></pui-input>
                <!-- <div class="tools m-l-10">
                    <div class="tools-item"><pui-icon name="arrow-up" @click="mainRef.showFilterTab = false"></pui-icon></div>
                    <div class="tools-item"><pui-icon name="arrow-down" @click="mainRef.showFilterTab = true"></pui-icon></div>
                </div> -->
            </div>
            <!-- <Transition name="fade">
                <div class="filter-content outer" v-show="mainRef.showFilterTab">
                    <pui-tabs :tabList="mainRef.tabList" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
                    <div :class="['filter-list', 'inner', mainRef.showFilter && 'show']">
                        <div class="filter-item">
                            <div class="item" v-show="mainRef.nowTabIndex === '0'">
                                <pui-checkbox label="组件库"></pui-checkbox>
                                <pui-checkbox label="系统仿真"></pui-checkbox>
                                <pui-checkbox label="器件仿真"></pui-checkbox>
                            </div>
                            <div class="item" v-show="mainRef.nowTabIndex === '1'">
                                <pui-checkbox label="区分大小写"></pui-checkbox>
                                <pui-checkbox label="开始位置"></pui-checkbox>
                                <pui-checkbox label="仅整字"></pui-checkbox>
                                <pui-checkbox label="跳过包文件夹"></pui-checkbox>
                                <pui-checkbox label="正则表达式"></pui-checkbox>
                            </div>
                            <div class="item" v-show="mainRef.nowTabIndex === '2'">
                                <pui-checkbox label="名称"></pui-checkbox>
                                <pui-checkbox label="关键字"></pui-checkbox>
                                <pui-checkbox label="描述"></pui-checkbox>
                            </div>
                        </div>
                    </div>
                </div>
            </Transition> -->
            <div class="file-content">
                <div class="file-list">
                    <div class="file-list">
                        <div v-for="(item, i) in filterList" :key="item.value" :class="['file-container',
                            (mainRef.filterResourceList.length % 2 === 0 && (i === filterList.length - 1 || i === filterList.length - 2) ||
                            filterList.length % 2 !== 0 && i === filterList.length - 1) && 'nom']" @click="onItemClick(item, i)">
                            <Draggable :data="item">
                                <div class="file-item">
                                    <img :src="getIcons(item.value)" />
                                    <span class="name">{{item.label}}</span>
                                </div>
                            </Draggable>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="file-content">
            <div class="file-info">
                <div class="file-info-item">
                    资源名称：
                </div>
                <div class="file-info-item">
                    {{ mainRef.nowResource.name }}
                </div>
                <div class="file-info-item">
                    描述：
                </div>
                <div class="file-info-item">
                    {{ mainRef.nowResource.description }}
                </div>
                <div class="file-info-item">
                    关键词：
                </div>
                <div class="file-info-item">
                    {{ mainRef.nowResource.nameTag }}
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'SearchTab'
})
</script>
<script lang="ts" setup>
import { reactive, watch, getCurrentInstance, computed } from 'vue'
import { libraryManager } from '@/services/phot_client/library'
import Draggable from '@/views/draggable/draggable.vue'
import { useStore } from 'vuex'
const store = useStore()
const { proxy } = getCurrentInstance() as any
const mainRef = reactive({
    nowTabIndex: '0',
    showFilter: true,
    tabList: [
        {
            name: '位置',
            id: '0'
        },
        {
            name: '配置选项',
            id: '1'
        },
        {
            name: '目标',
            id: '2'
        }
    ] as any[],
    queryString: '',
    showFilterTab: false,
    filterResourceList: [
    ] as any[],
    nowResource: {},
    activeIndex: ''
}) as any
// const emit = defineEmits({
//     onSearch: (val: any) => {}
// })
const getIcons = (name: any) => {
    try {
        const icon = require(`@/assets/icons/components/${name}.svg`)
        return icon
    } catch {
        return require(`@/assets/icons/unknown.svg`)
    }
}
// watch(() => mainRef.queryString, (val1) => {
//     if (val1) {
//         // searchComponent(val1)
//     }
// })
const tabClickHandle = (e:any) => {
    if (e.id === mainRef.nowTabIndex) {
        mainRef.showFilter = !mainRef.showFilter
        return
    }
    mainRef.nowTabIndex = e.id
}
const filterList = computed(() => {
    return store.state.allLibraryList.filter((item: any) => item.value.toLowerCase().indexOf(mainRef.queryString.toLowerCase()) > -1)
})
const onIconClick = async (e: any) => {
    console.log(e)
    await searchComponent(e)
}
const onItemClick = async (item: any, index: any) => {
    console.log(item)
    mainRef.activeIndex = index
    await getComponentPrototype(item.component)
    // await addComponent(item.graphName)
}
const getComponentPrototype = async (component: any) => {
    console.group
    console.log("getComponentPrototype")
    console.log(component)
    mainRef.nowResource = await libraryManager.getComponentPrototype('./' + component.path)
}
const onComponentClickHandle = (item: any, index: any) => {
    if (mainRef.activeIndex === index) return
    mainRef.activeIndex = index
    mainRef.nowResource = item
    console.log(item)
}
const searchComponent = async (keywords: string) => {
    mainRef.filterResourceList = []
    mainRef.nowResource = {}
    try {
        const list = await libraryManager.searchComponent(keywords)
        list.map(async (item: any) => {
            // console.log(item)
            // if (item.type === 1) {
            //     mainRef.filterResourceList.push({
            //         id: item.name,
            //         label: item.name,
            //         value: item.name.replace(/.phtc/, ''),
            //         description: item.description,
            //         component: item
            //     })
            // }
        })
        // console.log(mainRef.filterResourceList)
    } catch (err) {

    }
}
</script>